<template>
	<view class="videolist" v-if="videolist">
		<view class="swiper-box">
			<swiper class="swiper" @change="swiperchange" @touchstart="touchstart" @touchend="touchend"
				:current="swiper_index" vertical="true" :skip-hidden-item-layout="true">
				<swiper-item v-for="(item,index) in videolist" :key="index">
					<view class="swiper-item">
						<video-player ref="videodom" @oClick="oc" @dbClick="dbc" :videoitem="item" :videoindex="index"
							:clickpage="page"></video-player>
						<view class="left">
							<list-left ref="listleft" :left="item"></list-left>
						</view>
						<class class="right">
							<list-right ref="listright" @comment="commentShow" :rightitem="item" @doLove="doLove()"
								@followChange="followChange" @unFollowChange="unFollowChange" @shareShow="shareShow">
							</list-right>
						</class>
					</view>
				</swiper-item>
<!-- 				<swiper-item v-if="fl" v-for="(item,index) in fl" :key="index">
					<view class="swiper-item">
						<video-player ref="videodom" @dbClick="dbc" :videoitem="item" :videoindex="index"
							:clickpage="page"></video-player>
						<view class="left">
							<list-left :left="item"></list-left>
						</view>
						<class class="right">
							<list-right ref="listright" :right="item"></list-right>
						</class>
					</view>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="nbsp">

		</view>
		<view class="comment-box" v-show="comment_show" :class="comment_show == true ? 'slidedown' : 'slideup'">
			<comment @closecomment="closeComment"></comment>
		</view>
		<view class="share-content" v-show="share_show" :class="share_show? 'share-up':'share-down'"
			@click="shareClose()">
			<view class="share-box" @click.stop="">
				<view class="item-box">
					<view class="download" @click="download()">
						<view class="iconfont icon-xiazai xiazai-icon"></view>
					</view>
					<view>下载</view>
				</view>
				<view class="item-box">
					<view class="download" @click="report()">
						<view class="iconfont icon-jubao jubao-icon"></view>
					</view>
					<view>举报</view>
				</view>
				<view class="item-box">
					<button open-type="share" class="download" @click="share()">
						<view class="iconfont icon-zhuanfa00 share-icon"></view>
					</button>
					<view>分享</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	import VideoPlayer from './VideoPlayer.vue';
	import ListLeft from './ListLeft.vue';
	import ListRight from './ListRight.vue';
	import Comment from './Comment.vue';

	var timer = null;
	export default {
		name: "VideoList",
		components: {
			VideoPlayer,
			ListLeft,
			ListRight,
			Comment,
		},
		data() {
			return {
				videolist: '',
				swiper_index: 0,
				comment_show: false,
				share_show: false,
				master: '', //当前用户信息
				startY: 0,
				endY: 0,
				startX: 0,
				endX: 0,
				page: 0, //当前播放视频下标
				process: '',
				sql_list: '', //视频列表中list，用于请求下一篇数据
			};
		},
		props: ['index'],
		created() {
			this.master = uni.getStorageSync('user')[0].userId;
			this.getVideolist();
			this.pageSwiperPlay();
			this.swiperTo();
		},
		methods: {
			//获取视频列表
			getVideolist() {
				uni.request({
					url: `${t.o}/videolist`,
					data: {
						userId: this.master
					},
					success: res => {
						let list = res.data.data;
						let love_info = res.data.love_data;
						//初始化列表关注
						uni.request({
							url: `${t.o}/follow`,
							method: 'POST',
							data: {
								followId: this.master,
							},
							success: res => {
								list.forEach(item => {
									item.isfollow = false;
									item.islove = false;
									res.data.data.forEach(dataitem => {
										if (item.userId == dataitem.byfollower) {
											item.isfollow = true;
										}
									});
									love_info.forEach(loveitem => {
										if(loveitem.love_video_id == item.id) {
											item.islove = true;
										}
									})
								})
								this.videolist = list;
								this.sql_list = this.videolist[0].list;
								uni.hideLoading();
							}
						})
					}
				})
			},
			//列表继续请求下一篇数据
			getNextVideolist(list_next) {
				let that = this;
				uni.request({
					url: `${t.o}/videolist`,
					data: {
						list: list_next - 1,
					},
					success: res => {
						let list = res.data.data;
						let love_info = res.data.love_data || [];
						console.log(love_info)
						//初始化列表关注
						uni.request({
							url: `${t.o}/follow`,
							method: 'POST',
							data: {
								followId: this.master,
							},
							success: res => {
								list.forEach(item => {
									item.isfollow = false;
									item.islove = false;
									res.data.data.forEach(dataitem => {
										if (item.userId == dataitem.byfollower) {
											item.isfollow = true;
										}
									})
									love_info?.forEach(loveitem => {
										if(loveitem.love_video_id == item.id) {
											item.islove = true;
										}
									})
									this.videolist.push(item);
								})
							}
						})
					}
				})
			},
			swiperchange(e) {
				//处理滑动时，视频停止与播放
				clearTimeout(timer);
				this.page = e.detail.current;
				timer = setTimeout(() => {
					if (this.endY > this.startY) {
						// 向上
						this.$refs.videodom[this.page + 1].seek();
						this.$refs.videodom[this.page + 1].pause();
						this.$refs.videodom[this.page].player();

						this.endY = 0;
						this.startY = 0;
					} else {
						// 向下
						this.$refs.videodom[this.page - 1].seek();
						this.$refs.videodom[this.page - 1].pause();
						this.$refs.videodom[this.page].player();
						this.endY = 0;
						this.startY = 0;
					}
				}, 1)
				//滑动完当前篇视频数据时，再次请求
				const list = this.videolist[e.detail.current].list;
				if (list == this.sql_list - 1 && list >= 2) {
					setTimeout(() => {
						this.getNextVideolist(list);
						this.sql_list = list;
					}, 300);
				}
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].pageX;
				this.startY = e.changedTouches[0].pageY;
			},
			touchend(e) {
				this.endX = e.changedTouches[0].pageX;
				this.endY = e.changedTouches[0].pageY;
				if (this.startX - this.endX > 50 && Math.abs(this.endY - this.startY) < 30) {
					this.$refs.listright[this.page].goToAuthor();
				}
			},
			// 双击爱心
			dbc() {
				this.$refs.listright[this.page].dbcchangecolor();
				// this.$refs.videodom[this.page].timePlay(this.process);
			},
			//实现点赞
			doLove(id, todo) {
				uni.request({
					url: `${t.o}/doLove`,
					method: 'POST',
					data: {
						userId: this.master,
						todo,
						video: this.videolist[this.page],
					},
					success: res => {
						if(res.data.code == 1) {
							this.videolist.forEach(item => {
								if(item.id === id) {
									this.$set(item, 'islove', !todo);
									todo? item.loveNumber-=1 : item.loveNumber+=1;
								}
							})
						}
					}
				})
			},
			//单击
			oc() {
				this.page = this.page + 1 - 1;
				this.$refs.listleft[this.page].animationPlay();
				this.$refs.listright[this.page].animationPlay();
			},
			// 页面左右轮滚暂停播放
			pageSwiperPlay() {
				this.$bus.$on('changepage', (e) => {
					if (e == 1) {
						
						this.$refs.videodom[this.page].timePlay(this.process);
						this.$refs.videodom[this.page].player();
					} else {
						this.process = this.$refs.videodom[this.page].time;
						// this.$refs.videodom[this.page].timePlay(this.process);
						this.$refs.videodom[this.page].pause();
						
					}
				})
			},
			swiperTo() {
				this.swiper_index = this.index;
				if (this.index) {
					this.page = this.index;
				}
			},
			commentShow() {
				this.comment_show = true;
				this.$bus.$emit('commentShow', false);
			},
			closeComment() {
				this.$bus.$emit('commentShow', true);
				this.comment_show = false;
			},
			shareShow() {
				this.$bus.$emit('commentShow', false);
				this.share_show = true;
			},
			shareClose() {
				this.share_show = false;
				this.$bus.$emit('commentShow', true);
			},
			//下载视频
			download() {
				uni.showLoading({
					title: '下载中',
				})
				let url = `${t.o}/video/${this.videolist[this.page].src}`;
				const downloadTask = uni.downloadFile({
					url,
					success: res => {
						if (res.statusCode == '200') {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: res => {
									console.log('保存成功');
									uni.hideLoading();
									uni.showToast({
										title: '下载成功'
									})
								},
								fail: res => {
									uni.hideLoading();
									uni.showToast({
										title: '已取消'
									})
								}
							})
						}
					},
				})
			},
			//举报
			report() {
				uni.navigateTo({
					url: '/pagesB/reportlist/reportlist'
				})
			},
			//修改列表里关注的人的状态
			followChange(byfollower) {
				uni.request({
					url: `${t.o}/dofollow`,
					method: 'POST',
					data: {
						follower: this.master,
						byfollower: byfollower,
					},
					success: res => {
						console.log('储存成功')
					}
				});
				this.videolist.forEach(item => {
					if (item.userId == byfollower) {
						this.$set(item, 'isfollow', true);
					}
				})
			},
			unFollowChange(byfollower) {
				uni.request({
					url: `${t.o}/dofollow`,
					method: 'DELETE',
					data: {
						follower: this.master,
						byfollower: byfollower,
					}
				});
				this.videolist.forEach(item => {
					if (item.userId == byfollower) {
						this.$set(item, 'isfollow', false);
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.videolist {
		height: 100%;
		position: relative;

		.swiper-box {
			height: calc(100% - 100px);

			.swiper {
				height: 100%;

				.swiper-item {
					height: 100%;

					.left {
						position: absolute;
						z-index: 20;
						bottom: 10px;
						left: 20px;
					}

					.right {
						position: absolute;
						z-index: 20;
						right: 10px;
						bottom: 10px;
					}
				}
			}
		}

		.nbsp {
			width: 100%;
			height: 100px;
		}

		.comment-box {
			position: absolute;
			width: 100%;
			height: 100%;

			&.slidedown {
				animation: slidedown 0.2s linear;
				bottom: 0;
			}

			&.slideup {
				animation: slideup 0.2s linear;
				bottom: -100%;
			}
		}


		@keyframes slidedown {
			from {
				bottom: -100%;
			}

			to {
				bottom: 0;
			}
		}

		@keyframes slideup {
			from {
				bottom: 0;
			}

			to {
				bottom: -100%;
			}
		}

		.share-content {
			width: 100%;
			height: 100%;
			position: absolute;

			.share-box {
				color: black;
				position: absolute;
				bottom: 0;
				background-color: #fff;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				height: 110px;
				padding: 15px;
				width: 100%;
				display: flex;
				.item-box {
					text-align: center;
					margin-right: 10px;
					.download {
						margin-bottom: 10px;
						width: 50px;
						height: 50px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #ff5555;
						margin-left: 0;
						color: white;
					
						.xiazai-icon,
						.jubao-icon,
						.share-icon {
							font-size: 20px;
						}
					}
					
				}			
			}

			&.share-up {
				bottom: 0;
				animation: share_up linear .3s;
			}

			&.share-down {
				bottom: -100%;
				animation: share_down linear .3s;
			}
		}

		@keyframes share_up {
			0% {
				bottom: -100%;
			}

			100% {
				bottom: 0%;
			}
		}

		@keyframes share_down {
			0% {
				bottom: 0%;
			}

			100% {
				bottom: -100%;
			}
		}
	}
</style>
